/*
 * Copyright 2020 The Kubernetes Authors
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 * http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

@import 'mixins';
@import '../Card/mixins';
@import '../Text/mixins';
@import '../Tree/mixins';
@import '../Editor/mixins';
@import '../Wizard/mixins';
@import '../Sidecar/mixins';
@import '../Table/mixins';
@import '../Tooltip/mixins';
@import '../Accordion/mixins';
@import '../common/narrow-window';
@import '../ProgressStepper/mixins';
@import '../ExpandableSection/mixins';
@import '../../Themes/mixins';
@import 'BlockLinks';
@import 'Keys';

$marginTop: 0.5em;

@mixin TextContent {
  .pf-c-content {
    @content;
  }
}

@mixin CodeBlock {
  .kui--code-block-in-markdown {
    @content;
  }
}

@mixin NotShowingSampleOutput {
  &:not([data-is-sample-output]) {
    @content;
  }
}

@mixin CodeBlockActions {
  .kui--code-block-actions {
    @content;
  }
}

@mixin Validated {
  &[data-is-validated] {
    @content;
  }
}

@mixin Optional {
  &[data-is-optional] {
    @content;
  }
}

/** Prereqs not yet satisfied? */
@mixin NotReady {
  &:not([data-is-ready]) {
    @content;
  }
}

@mixin Sepia {
  &:not(:hover) {
    @include SepiaColors;
  }
}

@mixin GrayAction {
  @include InputWrapper {
    --color-for-guidebook-block-actions: var(--color-text-02);
  }
}

@mixin WarningAction {
  @include InputWrapper {
    --color-for-guidebook-block-actions: var(--color-red);
  }
}

@mixin InvisibleActionExceptOnHover {
  &:not(:hover) {
    @include BlockAction {
      display: none;
    }
  }
}

@mixin ParagraphBoundaryMargins {
  & > pre:not(:first-child) {
    margin-top: $inset;
  }
  & > p:last-child {
    margin-bottom: 0;
  }
}

@mixin InvisibleActionExceptOnHoverThenWarning {
  @include WarningAction;
  @include InvisibleActionExceptOnHover;
}

body[kui-theme-style] {
  @include TextContent {
    color: inherit;

    ol:not(.pf-c-wizard__nav-list):not(.pf-c-list),
    ul {
      margin: 0;
    }

    /* odd bug in patternfly... */
    .pf-c-tabs__list,
    .pf-c-chip-group__list {
      li + li {
        margin-top: 0;
      }
    }
    .pf-c-breadcrumb li + li {
      margin-top: 0;
    }
  }
}

@mixin h1 {
  @include CommentaryCard {
    h1 {
      @content;
    }
  }
}

@mixin h2 {
  @include CommentaryCard {
    h2 {
      @content;
    }
  }
}

@mixin h3 {
  @include CommentaryCard {
    h3 {
      @content;
    }
  }
}

@mixin h4 {
  @include CommentaryCard {
    h3 {
      @content;
    }
  }
}

@mixin h5 {
  @include CommentaryCard {
    h3 {
      @content;
    }
  }
}

@mixin Paragraphs {
  @include CommentaryCard {
    p,
    .paragraph {
      @content;
    }
  }
}

@mixin blockquote {
  @include CommentaryCard {
    blockquote {
      @content;
    }
  }
}

@mixin blockquote {
  @include CommentaryCard {
    blockquote {
      @content;
    }
  }
}

@mixin FullWidthTables {
  @include TableOuter {
    flex: 1;
  }
}
@mixin FullWidth {
  @include CommentaryCard {
    flex: 1;
  }
}
@mixin FullWidthInScrollback {
  @include Scrollback {
    @include FullWidth;
  }
}

@include Scrollback {
  @include LeftStrip {
    @include Commentary {
      p,
      ul,
      ol {
        font-size: $terminal-font-size;
      }
    }
  }
}

@include Scrollback {
  @include blockquote {
    border-left-color: var(--color-brand-03);
    color: var(--color-text-02);
  }

  @include Paragraphs {
    /* see https://github.com/IBM/kui/issues/5981 */
    word-break: break-word;
    word-wrap: break-word;
  }

  /* while editing, use a different background color for the Markdown preview */
  @include CommentaryCard {
    /* This helps with monaco-editor reactive width, e.g. when adding or removing splits */
    min-width: 0;

    &[data-is-editing] {
      .marked-content {
        background-color: var(--color-base03);
      }
    }
  }
}

@include FullWidth;
@include narrow-window {
  @include FullWidthInScrollback;
}

@include Commentary {
  @include BlockLinks;
  @include FullWidthTables;

  flex: 1;
  display: flex;
  justify-content: flex-start;
  max-width: $max-column-width;

  /* This helps with monaco-editor reactive width, e.g. when adding or removing splits */
  min-width: 0;

  &[data-is-editing] {
    flex: 1;

    .kui--commentary-card {
      min-width: 0;
      .kui--card {
        min-width: 0;
      }
    }
  }

  span.paragraph {
    display: block;
  }
}
@include CommentaryCard {
  display: flex;
  font-family: var(--font-sans-serif);
  @include Card {
    flex: 1;

    @include NoBoxShadow {
      box-shadow: none;
    }
  }
}

body[kui-theme-style='dark'] {
  @include Commentary {
    .bx--snippet {
      color: var(--color-base00);
    }
  }
}

body[kui-theme-style='light'] {
  @include InvertedColors {
    @include Commentary {
      .bx--snippet {
        color: var(--color-base00);
      }
    }
  }
}

@include h1 {
  --pf-c-content--heading--FontFamily: var(--font-sans-serif-title);
}
@include h2 {
  --pf-c-content--heading--FontFamily: var(--font-sans-serif-title);
}
@include h3 {
  --pf-c-content--heading--FontFamily: var(--font-sans-serif-title);
}
@include h4 {
  --pf-c-content--heading--FontFamily: var(--font-sans-serif-title);
}
@include h5 {
  --pf-c-content--heading--FontFamily: var(--font-sans-serif-title);
}

/**
 * PTY output, without some sort of color blocking, is hard to
 * distinguish from the surrounding Commentary text
 */
@include Commentary {
  @include PtyOutput {
    flex: 1;
    padding: 1em;
    border-radius: 6px;
    border: 1px solid var(--color-table-border1);
    background-color: var(--color-base00);
  }

  @include PtyOutputContainer {
    &:not(:first-child) {
      margin-top: $marginTop;
    }
  }
}

/* Nested Blocks, due to the way Commentary is structured; see Inputv2.tsx */
@include Block {
  @include Block {
    padding: 0;
  }
}

@include Commentary {
  .kui--table-like {
    border-collapse: collapse;
  }
}

@include Scrollback {
  @include Commentary {
    margin: 0 0.5em;

    @include Commentary {
      /* Nested Commentary */
      margin: 0;
    }

    @include MarkdownMajorParagraph {
      --kui--markdown-major-paragraph-margin: 1.5em;
      margin-top: var(--kui--markdown-major-paragraph-margin);
      margin-bottom: var(--kui--markdown-major-paragraph-margin);

      &:first-child {
        margin-top: 0;
      }
      &:last-child {
        margin-bottom: 0;
      }
    }

    @include Block {
      --input-padding-left: 0;
      --input-padding-right: 0;
      margin-top: 0;
    }
  }
}

@include Commentary {
  @include Accordion {
    font-size: $terminal-font-size;
  }
  @include ExpandableSection {
    font-size: $terminal-font-size;
    @include ExpandableSectionContentElement {
      @include ParagraphBoundaryMargins;
    }
  }

  @include ExpandableSectionContent {
    max-width: unset;

    & > .paragraph {
      padding-top: 0;
    }
  }

  @include MarkdownTabButton {
    font-size: $terminal-font-size;
    --pf-c-tabs__link--after--Bottom: 1px;
  }

  @include Spinner {
    --sk-size: 0.875em;
    width: $action-width;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  @include CommandOutput {
    /* flex-direction: column; */ /* in case of multi-output, e.g. from semicolonInvoke */
    font-size: $terminal-font-size;
    line-height: initial; /* PatternFly intercepts this for pf-c-content */

    @include Markdown {
      flex: initial; /* repl-result has flex-direction: column */
    }
  }
}

@mixin InvertedTab {
  @include MarkdownActiveTabButton {
    color: var(--color-text-01);
  }
}
@include InvertedColors {
  @include InvertedTab;
}
body[kui-theme-style='dark'] {
  @include InvertedTab;
  @include ExpandableSectionButtonIcon {
    color: inherit;
  }
}

$tip-toggle-opacity: 0.25;
$tip-toggle-opacity-2: 0.6;

@mixin GreenTip {
  $tip-toggle-opacity: 0.125;
  $bgcolor: var(--color-base0B-rgb);
  --pf-c-expandable-section--m-display-lg--after--BackgroundColor: #{rgba($bgcolor, $tip-toggle-opacity-2)};
  @include ExpandableSectionToggle {
    background-color: rgba($bgcolor, $tip-toggle-opacity);
  }
}

@mixin YellowTip {
  $bgcolor: var(--color-yellow-rgb);
  --pf-c-expandable-section--m-display-lg--after--BackgroundColor: #{rgba($bgcolor, $tip-toggle-opacity-2)};
  @include ExpandableSectionToggle {
    background-color: rgba($bgcolor, $tip-toggle-opacity);
  }
}

@mixin GrayTip {
  --pf-c-expandable-section--m-display-lg--after--BackgroundColor: var(--color-base04);
  @include ExpandableSectionToggle {
    background-color: var(--color-base02);
  }
}

@mixin BlueTip {
  $bgcolor: var(--color-blue-rgb);
  --pf-c-expandable-section--m-display-lg--after--BackgroundColor: #{rgba($bgcolor, $tip-toggle-opacity-2)};
  @include ExpandableSectionToggle {
    background-color: rgba($bgcolor, $tip-toggle-opacity);
  }
}

@mixin RedTip {
  $bgcolor: var(--color-red-rgb);
  --pf-c-expandable-section--m-display-lg--after--BackgroundColor: #{rgba($bgcolor, $tip-toggle-opacity-2)};
  @include ExpandableSectionToggle {
    background-color: rgba($bgcolor, $tip-toggle-opacity);
  }
}

@include SampleOutput {
  @include ExpandableSectionContentElement {
    margin-top: 0;
  }
}

@include MarkdownTip {
  @include ExpandableSectionContentElement {
    margin-top: 1em;
  }
  @include ExpandableSectionToggle {
    width: 100%;
    font-weight: 500;
    padding-top: 0.6875em;
    padding-bottom: 0.6875em;
    background-color: #e7f1fa;

    /* Some expandable section toggles in markdown have long urls,
   e.g. https://knative.dev/docs/getting-started/first-service/ */
    word-break: break-all;
  }
  @include ExpandableSectionToggle {
    color: var(--color-text-01);
  }
  @include ExpandableSectionToggleText {
    color: var(--color-text-01);
  }
  @include MarkdownTipVariant(tip) {
    @include GrayTip;
  }
  @include MarkdownTipVariant(success) {
    @include GreenTip;
  }
  @include MarkdownTipVariant(question) {
    @include GreenTip;
  }
  @include MarkdownTipVariant(warning) {
    @include YellowTip;
  }
  @include MarkdownTipVariant(caution) {
    @include YellowTip;
  }
  @include MarkdownTipVariant(todo) {
    @include BlueTip;
  }
  @include MarkdownTipVariant(note) {
    @include BlueTip;
  }
  @include MarkdownTipVariant(bug) {
    @include RedTip;
  }
}

@include MarkdownTabs {
  /* we don't want padding below the tabs part of a Tabbed section */
  &.paragraph {
    padding-bottom: 0;
  }
}

@include MarkdownTabContent {
  @include CardBody {
    padding: 0;
    @include ParagraphBoundaryMargins;
  }
}

/** see https://github.com/kubernetes-sigs/kui/pull/8808 */
.kui--markdown-from-repl.marked-content {
  & > p {
    margin-top: 0;
    margin-bottom: 0;
  }
}

@include MarkdownTabContentCard {
  /** Nested tabs */
  @include MarkdownTabContentCard {
    padding: 0;
  }
}

/** Markdown-rendered content not in a Commentary */
pre {
  @include TextContent {
    font-size: inherit;
    p {
      white-space: pre-wrap;
    }
  }
}
@include Commentary {
  @include TextContent {
    p {
      /* See the white-space: pre-wrap rule just above */
      white-space: normal;
    }
  }
}

@include Commentary {
  @include Admonition {
    width: 15em;

    &.kui--float-left {
      margin-right: 0.8rem;
    }
    &.kui--float-right {
      margin-left: 0.8rem;
    }

    @include ExpandableSectionContentElement {
      font-size: $terminal-font-size;
    }
  }
}
@include Commentary {
  /* needed to override Editor stylings */
  @include CodeBlock {
    @include BlockOutput {
      margin-top: 0;
    }
    @include EditorBackground {
      background-color: $input-bg-inverted;
    }

    @include CardBody {
      padding: 0;

      @include CardBody {
        padding: var(--pf-c-card--first-child--PaddingTop);
      }
    }
  }
  @include MarkdownTip {
    @include EditorBackground {
      background-color: $input-bg-inverted;
    }
  }
}

@include MarkdownSecondaryTabs {
  padding-top: 0;
}

@include CodeBlock {
  &:hover {
    @include CodeBlockActions {
      filter: none;
    }
  }

  p:only-child {
    margin: 0;
  }
}
@include CodeBlockActions {
  position: absolute;

  &[data-align='top-left'],
  &[data-align='top-right'] {
    filter: grayscale(0.15) opacity(0.9);
  }
  &[data-align='top-left'] {
    left: -0.6875em;
    top: -0.6875em;
  }
  &[data-align='top-right'] {
    right: -1em;
    top: -1em;
  }

  .kui--tag {
    --pf-c-badge--m-unread--BackgroundColor: var(--color-base01);
    font-weight: 400;
    font-family: var(--font-sans-serif);
  }
}

@include TextContent {
  & > .marked-content {
    @include ParagraphBoundaryMargins;
  }
}

@include CommandOutput {
  @include TextContent {
    & > .marked-content > p {
      font-size: $terminal-font-size;
    }
  }
}

@include Commentary {
  @include Block {
    @include InputWrapper {
      $action-size: 1;
      --color-for-guidebook-block-actions: var(--color-brand-01);
      @include Spinner {
        padding: 0;
        margin: 0;
        width: calc(2em * $action-size);
      }
      @include BlockAction {
        width: auto;
        padding: 8px;
        font-size: $action-size + em;
        color: var(--color-for-guidebook-block-actions);
      }
    }

    @include NotReady {
      @include InvisibleActionExceptOnHoverThenWarning;
    }

    @include Optional {
      @include Sepia;
      @include GrayAction;
    }

    @include Validated {
      @include Sepia;
      @include GrayAction;
      @include InvisibleActionExceptOnHover;
    }

    @include NotShowingSampleOutput {
      @include Successful {
        @include GrayAction;
        @include InvisibleActionExceptOnHover;
      }
    }
  }
}

@include Tooltip {
  i {
    margin-left: 0.5em;
  }
  .fa-dot-circle {
    color: var(--color-warning);
  }
  .fa-check-circle {
    color: var(--color-ok);
  }
  .fa-exclamation-circle {
    color: var(--color-error);
  }
}

@include h1 {
  @include MarkdownIcon {
    font-size: 11rem;
    display: flex;
    line-height: 10rem;
  }
}

@include Scrollback {
  @include RightStrip {
    @include Block {
      @include BlockOutput {
        padding-left: 0;
        padding-right: 0;
      }
    }
    @include Commentary {
      margin: 0;
    }
  }
}
